<template>
	<view class="listItem">
		<view class="left">
			<image :src="data.httpUrl+'/app/file/viewFile?fileId='+props.item.mainPicture" mode="aspectFill"></image>
		</view>
		<view class="center">
			<text class="ellipsis_2">{{props.item.spuName}}</text>
			<view class="">
				{{props.item.specName}}（{{props.item.specValue}}）
			</view>
			<view class="attr">
				<text  v-for="(item2,index2) in props.item.attrs || []" :key="index2">{{item2.propertyName}}：{{item2.propertyValue}};</text>
			</view>
		</view>
		<view class="right">
			<text>￥{{props.item.price}}</text>
			<text>x{{props.item.num}}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	const props = defineProps(['item'])
	const data = reactive<any>({
		httpUrl: getApp().globalData.baseUrl,
	})
</script>

<style lang="scss">
.listItem{
	display: flex;
	align-items: flex-start;
	margin-top: 24rpx;
	>.left{
		width: 160rpx;
		height: 160rpx;
		border-radius: 24rpx;
		background: #ccc;
		image{
			width: 100%;
			height: 100%;
			border-radius: 24rpx;
		}
	}
	>.center{
		flex: 1;
		margin: 0 24rpx;
		width:0;
		>text{
			width:100%;
		}
		view{
			margin-top:10rpx;
			font-size:24rpx;
			color:#8C8C8C;
		}
		.attr {
			
			text{
				font-size: 24rpx;
				color: #8C8C8C;
				display: inline-block;
				margin-right: 10rpx;
			}
		}
	}
	>.right{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		text:nth-of-type(1){
			font-size:24rpx;
			color:#595959;
		}
		text:nth-of-type(2){
			font-size:20rpx;
			color:#8C8C8C;
			margin-top:10rpx;
		}
	}
}
</style>